<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
    <link rel="stylesheet" href="/assets/common/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/modular/websocket/websocket.css"/>
</head>
<body>
<div id="msg-card" style="padding: 20px; background-color: #F2F2F2;">

</div>
<div class="layui-col-xs12">
    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
        <input id="file" placeholder="选择文件！" type="file" class="layui-input"/>
    </div>
    <div class="layui-col-xs9 layui-col-sm9 layui-col-md9">
        <input id="message" placeholder="请输入消息！" type="text" class="layui-input"/>
    </div>
    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2" style="text-align: right">
        <input id="send" type="button" class="layui-btn" value="send"/>
    </div>
</div>
<div id="msg">
</div>
</body>

<script id="item" type="text/html">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="text-align: {{d.align}}">
                <span>{{d.self}}</span><i class="layui-icon layui-icon-friends"
                                          style="font-size: 30px; color: #1E9FFF;"></i><span>{{d.friend}}</span>
                <div class="layui-card-body">
                    {{d.message}}
                </div>
                <div class="layui-card-body">
                    {{d.name}}
                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/javascript" src="/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="/assets/modular/websocket/websocket.js"></script>

</html>